// webpack配置文件

//1.引入的模块
let path = require("path");
const glob = require("glob"); // node内置glob模块 主要用于解析路径
//引入htmlwebpackplugins插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css
/* 自动加载所有页面JS作为入口 */

//定义一个js模块对象
let entry = {};
//获取所有模块的js文件路径----找到所有页面目录中的js文件
let entryJs = glob.sync("./src/pages/*/*.js");
//遍历数组--拼接entry键值对
entryJs.map((v) => {
	let chunksName = path.basename(v, ".js"); //把文件名 后缀.js去掉  ad.js===>ad
	//拼接
	entry[chunksName] = v;
});

/* 自动打包所有页面 */
//定义一个所有页面的数组
let pageArr = [];
//获取所有pages中的html
let pageHtml = glob.sync("./src/pages/*/*.html");
//遍历拼接每一个页面 插件
pageHtml.forEach((v) => {
	//处理数据
	//2.把拼接好的html 放到数组中
	pageArr.push(
		new HtmlWebpackPlugin({
			template: v, //开发页面模板
			filename: path.basename(v), //输出到dist中的名字
			chunks: [path.basename(v, ".html")], //配置当前页所需要的模块
		})
	);
});

//2.暴露5大核心
module.exports = {
	//1.entry
	// entry: './src/index.js',//单入口

	//老做法-多入口----配置所有页面中需要使用的模块(一个js文件就是一个模块)
	//语法:  key:value   此处的key 相当于模块名  value就是指定模块的地址

	entry,
	//2.output
	output: {
		path: path.resolve(__dirname, "dist"), //设置输出目录
		filename: "js/[name]-[hash:16].js", //输出的静态文件名
		publicPath: "./",
	},
	//3.loader
	module: {
		//规则
		rules: [
			//处理css
			{
				test: /\.css$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader, // 提取css
						options: {
							publicPath: "../", // 资源查找路径
						},
					},
					"css-loader",
				],
			},
			//处理less
			{
				test: /\.less$/, // 匹配所有.less文件
				use: [
					{
						loader: MiniCssExtractPlugin.loader, // 提取css
						options: {
							publicPath: "../", // 资源查找路径
						},
					}, // 创建style标签 把css插入html的head内
					"css-loader", // 解析加载css到js中（把css打成字符串）。
					"less-loader", // 编译less为css
				],
			},
			//处理css中的img
			{
				test: /\.(jpg|png|gif)$/,
				loader: "url-loader", //使用哪个加载器
				options: {
					//配置加载器其它规则
					name: "[hash:10].[ext]", // 图片输出的名字hash长度16位 默认32位
					limit: 10 * 1024, // 限制图像大小 小于10kb base64处理 如大于10kb,不处理
					// 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
					esModule: false,
					outputPath: "img", // 图片输出文件夹
				},
			},
			//处理html中的img
			{
				test: /\.html$/, // 处理html中引入img
				loader: "html-loader",
			},
			//处理字体图标
			{
				test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
				loader: "file-loader",
				options: {
					name: "[hash:16].[ext]", // 输出名字
					outputPath: "fonts", // 输出路径（输出到文件夹fonts中）
				},
			},
			//ES6转ES5
			{
				test: /\.js$/,
				loader: "babel-loader", // loader 编译es6为es5
				exclude: /node_modules/, // 排除 node_modules
			},
		],
	},
	//4.plugins
	plugins: [
		// 打包html
		//语法:  new 插件名({是一个对象,表示配置插件的选项})
		// 提取css，把css中打包的js中提取出来成为独立文件
		new MiniCssExtractPlugin({
			// 提取css
			filename: "css/[name].css", // 输出到css文件夹里
		}),

		new OptimizeCssAssetsWebpackPlugin(), // 压缩css
	].concat(pageArr),

	//5.mode
	mode: process.env.NODE_ENV,

	//6.开发服务器
	devServer: {
		contentBase: path.resolve(__dirname, "dist"), // 启动服务器目录
		compress: true, // 启动gzip
		port: 8848, // 端口 具有唯一性,同一个端口号,不能多次启动,不能使用常用端口: 5500 80 8080  3306  3000  设置时不推荐使用1000以内数字
		open: true, // 自动打开服务
		publicPath: "/", // 静态资源查找路径
		openPage: "ad.html", // 默认打开的页面
	},
	target: "web", // 目标是浏览器
};
